<f:layout name="Content" />

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

<f:section name="Configuration">
	<flux:form wizardTab="Pncaa" id="teaser" icon="{v:extension.path.resources(path: 'Images/Icons/teaser.png')}">
		<flux:form.field.file name="image" />
		<flux:form.field.input name="header" eval="trim,required"/>
		<flux:form.field.text name="text" enableRichText="TRUE"/>
		<flux:form.field.input name="linkLabel" eval="trim,required"/>
		<flux:form.field.input name="linkTarget">
			<flux:form.field.wizard.link />
		</flux:form.field.input>
	</flux:form>
</f:section>

<f:section name="Preview">
	<strong>Image</strong>: {image}<br>
	<strong>Text</strong>: {text}<br>
	<strong>Link</strong>: {linkTarget}
</f:section>

<f:section name="Main">
	<div class="text-center">
		<f:if condition="{image}">
			<figure>
				<f:image src="{image}" alt="{image}" />
			</figure>
		</f:if>
		<header>
			<h3>{header}</h3>
		</header>
		<f:format.html>{text}</f:format.html>
		<f:if condition="{linkTarget}">
			<f:if condition="{linkTarget -> v:math.round()} > 0">
				<f:then>
					<f:link.page pageUid="{linkTarget}" class="btn btn-primary" rel="" title="{linkLabel}">
						{linkLabel}
					</f:link.page>
				</f:then>
				<f:else>
					<a href="{linkTarget}" class="btn btn-default" rel="" title="{linkLabel}">
						{linkLabel}
					</a>
				</f:else>
			</f:if>
		</f:if>
	</div>
</f:section>

</div>
